<template>
  <div id="app">
    <div class="mainBox">
      <div class="headerPng">
        <img src="@/assets/text.png" alt="">
      </div>

      <div class="titlePng"></div>
      <router-view style="flex:1;background:#EEFAF6" />
      <div class="bottomPng"></div>
    </div>
  </div>
</template>
<style >
.el-message {
  min-width: 220px;
  top: 48% !important;
}
</style>
<style scoped lang="scss">

.mainBox {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 78px;
  display: flex;
  flex-direction: column;
  padding-bottom: 850px;
  overflow: hidden;
  .headerPng {
    height: 30vh;
    background: url("~@/assets/head.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    img{
      position: absolute;
      width:90%;
      left: 5%;
      top: 35%;
    }
  }
  .titlePng {
    margin-top: -10vh;
    height: 28vh;
    background: url("~@/assets/title.png") no-repeat;
    background-size: 100% 100%;
  }
  .bottomPng {
    height: 950px;
    background: url("~@/assets/bottom2.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}
</style>
